<template>
  <div>
    <div class="user-banner banner">
      <h1 class="banner-title">个人中心</h1>
    </div>
    <v-card class="blog-container">
      <div>
        <span class="info-title">基本信息</span>
      </div>
      <v-row class="info-wrapper">
        <v-col md="3" cols="12">
          <button id="pick-avatar">
            <v-avatar size="140">
              <img :src="this.$store.state.avatar" />
            </v-avatar>
          </button>
          <avatar-cropper
            @uploaded="uploadAvatar"
            trigger="#pick-avatar"
            upload-url="http://42.192.178.221:8088/api/user/avatar"
          />
        </v-col>
        <v-col md="7" cols="12">
          <v-text-field
            v-model="userInfo.nickname"
            label="昵称"
            placeholder="请输入你的昵称"
          />
          
          <v-text-field
            v-model="userInfo.signature"
            class="mt-7"
            label="个性签名"
            placeholder="留下你的签名吧"
          />
         
          <div v-if="loginType != 0" class="mt-7 binding">
            <v-text-field
              disabled
              v-model="email"
              label="邮箱"
              placeholder="请绑定邮箱"
            />
          </div>
          <v-text-field
            disabled
            v-model="registrationTime"
            class="mt-7"
            label="注册时间"
            placeholder="注册时间"
          />
          <el-button icon="el-icon-check"  @click="updataUserInfo">保存修改</el-button>
          <el-button icon="el-icon-plus" @click="dialog = true">添加友链</el-button>
        </v-col>
      </v-row>
    </v-card>
    <el-drawer
  title="添加友链"
  :before-close="handleClose"
  :visible.sync="dialog"
  direction="ltr"
  custom-class="demo-drawer"
  ref="drawer"
  :modal="false"
  >
  <div class="demo-drawer__content">
    <el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="链接"  :label-width="formLabelWidth" prop="linkAddress">
        <el-input placeholder="请输入链接地址" clearable maxlength="50" show-word-limit style="width:90%;" v-model="form.linkAddress" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="描述" :label-width="formLabelWidth" prop="linkDesc">
        <el-input  type="textarea"
                    placeholder="请输入链接描述"
                   style="width:90%;" 
                   maxlength="20" 
                   show-word-limit
                   v-model="form.linkDesc"
                    autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="标签" :label-width="formLabelWidth" prop="tagName">
        <el-select style="width:90%;" v-model="form.tagName"  placeholder="请选择链接标签">
          <el-option label="个人网站" value="个人网站"></el-option>
          <el-option label="CSDN" value="CSDN"></el-option>
          <el-option label="Gitee" value="Gitee"></el-option>
          <el-option label="GitHub" value="GitHub"></el-option>
          <el-option label="其他" value="其他"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div class="demo-drawer__footer" style="margin-left: 20%;margin-top: 10%;">
      <el-button style="width:40%;" @click="cancelForm">取 消</el-button>
      <el-button style="width:40%;" type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
    </div>
  </div>
</el-drawer>
  </div>
</template>

<script>
import AvatarCropper from "vue-avatar-cropper";
import {update} from '../../api/user';
import {issue} from '../../api/link';
export default {
  components: { AvatarCropper },
  data: function() {
    return {
      param:{
        uid:'',
        token:''
      },
      userInfo: {
        uid: '',
        nickname: '',
        signature: '',
        avatar: ''
      },
      dialog: false,
      loading: false,
      form: {
        uid:'',
        linkAddress: '',
        linkDesc: '',
        tagName: ''
      },
      rules: {
         linkAddress: [
            { required: true, message: '请输入链接地址', trigger: 'blur' },
            { min: 5, max: 50, message: '长度在 5 到 50 个字符', trigger: 'blur' }
          ],
          linkDesc: [
            { required: true, message: '请输入链接描述', trigger: 'blur' }
          ],
          tagName: [
            { required: true, message: '请选择链接标签', trigger: 'change' }
          ],
          
        },
      formLabelWidth: '80px',
      timer: null,
    };
  },
  created() {
    this.param.uid=this.$store.state.uid;
    this.form.uid=this.$store.state.uid;
    this.param.token=this.$store.state.token;
    this.userInfo.uid=this.$store.state.uid;
    this.userInfo.nickname=this.$store.state.nickname;
    this.userInfo.signature=this.$store.state.signature;
    this.userInfo.avatar=this.$store.state.avatar;
  },
  methods: {
    updataUserInfo() {
      update(this.userInfo,this.param).then(res=>{
        if (res.data.code==200) {
          this.$store.commit("updateUserInfo", this.userInfo);
          this.$toast({ type: "success", message: res.data.msg });
        } else {
          this.$toast({ type: "error", message: res.data.msg });
        }
      })
    },
    uploadAvatar(res) {
      if (res.code==200) {
        this.$store.commit("updateAvatar", res.data);
        this.userInfo.avatar=res.data;
        this.updataUserInfo();
        //this.$toast({ type: "success", message: res.msg });
      } else {
        this.$toast({ type: "error", message: res.msg });
      }
    },
    handleClose(done) {
      if (this.loading) {
        return;
      }
      if(this.form.linkAddress.length==0 || this.form.linkDesc.length==0 || this.form.tagName.length==0){
          this.$toast({ type: "error", message: "请完善信息！" });
          return;
      }
      this.$confirm('确定要提交友链信息吗？')
        .then(_ => {
          console.log(_);
          this.loading = true;
          this.timer = setTimeout(() => {
            done();
            // 动画关闭需要一定的时间
            setTimeout(() => {
              this.loading = false;
             
            }, 400);
          }, 800);
          this.issueFriendLink();
        })
    },
    issueFriendLink(){
        issue(this.form,this.param).then(res=>{
          if (res.data.code==200) {
            this.clearForm();
            this.$toast({ type: "success", message: res.data.msg });
          } else {
            this.$toast({ type: "error", message: res.data.msg });
          }
        })
    },
    clearForm(){
      this.form.linkAddress='';
      this.form.linkDesc='';
      this.form.tagName='';
    },
    cancelForm() {
      this.loading = false;
      this.dialog = false;
      clearTimeout(this.timer);
    }
  },
    
  computed: {
    email() {
      return this.$store.state.email;
    },
    registrationTime() {
      return this.$store.state.registrationTime;
    },
    loginType() {
      return this.$store.state.loginType;
    }
  }
};
</script>

<style scoped>
.user-banner {
  background: url(https://static.talkxj.com/article/setting.jpeg) center
    center / cover no-repeat;
  background-color: #49b1f5;
}
.info-title {
  font-size: 1.25rem;
  font-weight: bold;
}
.info-wrapper {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
#pick-avatar {
  outline: none;
}
.binding {
  display: flex;
  align-items: center;
}
</style>
